<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <title>后台信息管理系统</title>

    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/font-awesome/css/font-awesome.css}" rel="stylesheet"/>

    <link th:href="@{/css/animate.css}" rel="stylesheet"/>
    <link th:href="@{/css/style.css}" rel="stylesheet"/>

</head>

<body>
<div id="wrapper">
    <nav class="navbar-default navbar-static-side" role="navigation" th:include="nav :: navigation"></nav>
    <div id="page-wrapper" class="gray-bg">
        <div class="border-bottom" th:include="header :: headerTop"></div>
        <div class="wrapper wrapper-content">
            <div class="row">
                <div class="col-lg-3">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <span class="label label-success pull-right">Income</span>
                            <h5>当前月收入(元)</h5>
                        </div>
                        <div class="ibox-content">
                            <h1 class="no-margins" th:text="${stats.mIncome}">--月收入啦啦</h1>
                            <!--<td th:text="${stats.monthlyIncome}">Onions</td>-->
                            <div class="stat-percent font-bold text-success" th:text="${stats.incomePer}">月收入环比<i
                                    class="fa fa-level-up"></i></div>
                            <small>Monthly income</small>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <span class="label label-info pull-right">Order</span>
                            <h5>当前月订单数</h5>
                        </div>
                        <div class="ibox-content">
                            <h1 class="no-margins" th:text="${stats.mOrderNum}">--月订单数</h1>
                            <div class="stat-percent font-bold text-info" th:text="${stats.orderNumPer}">20% <i
                                    class="fa fa-level-up"></i></div>
                            <small>Monthly orders</small>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <span class="label label-primary pull-right">Today</span>
                            <h5>访问量</h5>
                        </div>
                        <div class="ibox-content">
                            <h1 class="no-margins" th:text="${stats.pv}">--访问量</h1>
                            <div class="stat-percent font-bold text-navy">44% <i class="fa fa-level-up"></i></div>
                            <small>New visits</small>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <span class="label label-danger pull-right">Refund</span>
                            <h5>当前月退单数</h5>
                        </div>
                        <div class="ibox-content">
                            <h1 class="no-margins" th:text="${stats.mOrderRefund}">80,600</h1>
                            <div class="stat-percent font-bold text-danger" th:text="${stats.mOrderRefundPer}">38%</div>
                            <small>Monthly refund</small>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>Orders</h5>
                            <div class="pull-right">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-xs btn-white active">Today</button>
                                    <button type="button" class="btn btn-xs btn-white">Monthly</button>
                                    <button type="button" class="btn btn-xs btn-white">Annual</button>
                                </div>
                            </div>
                        </div>
                        <div class="ibox-content">
                            <div class="row">
                                <div class="col-lg-9">
                                    <div class="flot-chart">
                                        <div class="flot-chart-content" id="flot-dashboard-chart"></div>
                                        <input type="hidden" id="data2" th:value="${data2}"/>
                                        <input type="hidden" id="data3" th:value="${data3}"/>
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <ul class="stat-list">
                                        <li>
                                            <h2 class="no-margins">2,346</h2>
                                            <small>Total orders in period</small>
                                            <div class="stat-percent">48% <i class="fa fa-level-up text-navy"></i></div>
                                            <div class="progress progress-mini">
                                                <div style="width: 48%;" class="progress-bar"></div>
                                            </div>
                                        </li>
                                        <li>
                                            <h2 class="no-margins ">4,422</h2>
                                            <small>Orders in last month</small>
                                            <div class="stat-percent">60% <i class="fa fa-level-down text-navy"></i>
                                            </div>
                                            <div class="progress progress-mini">
                                                <div style="width: 60%;" class="progress-bar"></div>
                                            </div>
                                        </li>
                                        <li>
                                            <h2 class="no-margins ">9,180</h2>
                                            <small>Monthly income from orders</small>
                                            <div class="stat-percent">22% <i class="fa fa-bolt text-navy"></i></div>
                                            <div class="progress progress-mini">
                                                <div style="width: 22%;" class="progress-bar"></div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer" th:include="footer :: copyright"></div>
    </div>
</div>

<!-- Mainly scripts -->
<script th:src="@{/js/jquery-2.1.1.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/plugins/metisMenu/jquery.metisMenu.js}"></script>
<script th:src="@{/js/plugins/slimscroll/jquery.slimscroll.min.js}"></script>

<!-- Flot -->
<script th:src="@{/js/plugins/flot/jquery.flot.js}"></script>
<script th:src="@{/js/plugins/flot/jquery.flot.tooltip.min.js}"></script>
<script th:src="@{/js/plugins/flot/jquery.flot.spline.js}"></script>
<script th:src="@{/js/plugins/flot/jquery.flot.resize.js}"></script>
<script th:src="@{/js/plugins/flot/jquery.flot.pie.js}"></script>
<script th:src="@{/js/plugins/flot/jquery.flot.symbol.js}"></script>
<script th:src="@{/js/plugins/flot/jquery.flot.time.js}"></script>

<!-- Peity -->
<script th:src="@{/js/plugins/peity/jquery.peity.min.js}"></script>
<script th:src="@{/js/demo/peity-demo.js}"></script>

<!-- Custom and plugin javascript -->
<script th:src="@{/js/inspinia.js}"></script>
<script th:src="@{/js/plugins/pace/pace.min.js}"></script>

<!-- jQuery UI -->
<script th:src="@{/js/plugins/jquery-ui/jquery-ui.min.js}"></script>

<!-- Jvectormap -->
<script th:src="@{/js/plugins/jvectormap/jquery-jvectormap-2.0.2.min.js}"></script>
<script th:src="@{/js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js}"></script>

<!-- EayPIE -->
<script th:src="@{/js/plugins/easypiechart/jquery.easypiechart.js}"></script>

<!-- Sparkline -->
<script th:src="@{/js/plugins/sparkline/jquery.sparkline.min.js}"></script>

<!-- Sparkline demo data  -->
<script th:src="@{/js/demo/sparkline-demo.js}"></script>

<script>
    $(document).ready(function () {

        $('.chart').easyPieChart({
            barColor: '#f8ac59',
            scaleLength: 5,
            lineWidth: 4,
            size: 80
        });

        $('.chart2').easyPieChart({
            barColor: '#1c84c6',
            scaleLength: 5,
            lineWidth: 4,
            size: 80
        });


        function gd(year, month, day) {
            return new Date(year, month - 1, day).getTime();
        }


        var list2 = $('#data2').val();
        var list3 = $('#data3').val();

        list2 = list2.split(", ");
        list3 = list3.split(",");

        var thirtyDays = timeForMat(30);
        var data3 = [];
        var data2 = [];
        var j = 0;
        var t2 = thirtyDays['t2'];
        var t1 = thirtyDays['t1'];
        for (var i = t2; t1 >= i; i = i + 86400000) {
            var temp2 = [i, parseInt(list2[j])]
            var temp3 = [i, parseInt(list3[j])]
            data2.push(temp2);
            data3.push(temp3);
            j++
        }
        console.log(data2);
        console.log(data3);
        function timeForMat(count) {
            // 拼接时间
            var time1 = new Date()
            time1.setTime(time1.getTime())
            console.log(time1)
            var Y1 = time1.getFullYear()
            var M1 = ((time1.getMonth() + 1) > 10 ? (time1.getMonth() + 1) : '0' + (time1.getMonth() + 1))
            var D1 = (time1.getDate() > 10 ? time1.getDate() : '0' + time1.getDate())
            var date1 = gd(Y1, M1, D1) // 当前时间
            var time2 = new Date()
            time2.setTime(time2.getTime() - (24 * 60 * 60 * 1000 * count))
            console.log(time2)
            var Y2 = time2.getFullYear()
            var M2 = ((time2.getMonth() + 1) > 10 ? (time2.getMonth() + 1) : '0' + (time2.getMonth() + 1))
            var D2 = (time2.getDate() > 10 ? time2.getDate() : '0' + time2.getDate())
            var date2 = gd(Y2, M2, D2) // 当前时间
            // 之前的7天或者30天
            return {
                t1: date1,
                t2: date2
            }
        }

        var dataset = [
            {
                label: "收入(元)",
                data: data3,
                color: "#1ab394",
                bars: {
                    show: true,
                    align: "center",
                    barWidth: 24 * 60 * 60 * 600,
                    lineWidth: 0
                }

            },
            {
                label: "订单数",
                data: data2,
                yaxis: 2,
                color: "#1C84C6",
                lines: {
                    lineWidth: 1,
                    show: true,
                    fill: true,
                    fillColor: {
                        colors: [{
                            opacity: 0.2
                        }, {
                            opacity: 0.4
                        }]
                    }
                },
                splines: {
                    show: false,
                    tension: 0.6,
                    lineWidth: 1,
                    fill: 0.1
                },
            }
        ];

        var options = {
            xaxis: {
                mode: "time",
                tickSize: [3, "day"],
                tickLength: 0,
                axisLabel: "Date",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: 'Arial',
                axisLabelPadding: 10,
                color: "#d5d5d5"
            },
            yaxes: [{
                position: "left",
//                max: 10070,
                color: "#d5d5d5",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: 'Arial',
                axisLabelPadding: 3
            }, {
                position: "right",
                clolor: "#d5d5d5",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: ' Arial',
                axisLabelPadding: 67
            }
            ],
            legend: {
                noColumns: 1,
                labelBoxBorderColor: "#000000",
                position: "nw"
            },
            grid: {
                hoverable: false,
                borderWidth: 0
            }
        };


        var previousPoint = null, previousLabel = null;

        $.plot($("#flot-dashboard-chart"), dataset, options);

        var mapData = {
            "US": 298,
            "SA": 200,
            "DE": 220,
            "FR": 540,
            "CN": 120,
            "AU": 760,
            "BR": 550,
            "IN": 200,
            "GB": 120,
        };

        $('#world-map').vectorMap({
            map: 'world_mill_en',
            backgroundColor: "transparent",
            regionStyle: {
                initial: {
                    fill: '#e4e4e4',
                    "fill-opacity": 0.9,
                    stroke: 'none',
                    "stroke-width": 0,
                    "stroke-opacity": 0
                }
            },

            series: {
                regions: [{
                    values: mapData,
                    scale: ["#1ab394", "#22d6b1"],
                    normalizeFunction: 'polynomial'
                }]
            },
        });
    });
</script>
</body>
</html>
